<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style type="text/css">
		#canvas{
			display: block;
			margin: 0 auto;
		}
    </style>
</head>
<body>
    <canvas id="canvas" width="1024" height="600"></canvas>
	
	<script type="text/javascript" src="./digit.js"></script>
	<script type="text/javascript">
		var canvas = document.getElementById('canvas');
		var context = canvas.getContext('2d');

		var RADIUS = 8;
		var LEFT   = 50;
		var TOP    = 50;
		var WIDTH  = 1024;
		var HEIGHT = 600;


		var END_TIME = new Date(new Date().getTime() + 3600*1000);
		var RANGE = 0;
		var balls = [];
		var colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];

		setInterval(function(){
			render(context);
			update();
		}, 50);

		function update() {
			var next_time = getTimeRange();
			var next_hour = parseInt(next_time / 3600);
			var next_min = parseInt((next_time - next_hour* 3600) / 60);
			var next_sec = next_time % 60;

			var cur_hour = parseInt(RANGE / 3600);
			var cur_min = parseInt((RANGE - cur_hour* 3600) / 60);
			var cur_sec = RANGE % 60;

			if (next_time != RANGE) {
				if (parseInt(next_hour/10) != parseInt(cur_hour/10)) {
					addBalls(LEFT, TOP, parseInt(cur_hour/10));
				}
				if (next_hour%10 != cur_hour%10) {
					addBalls(LEFT+ 15 * RADIUS + 6, TOP, cur_hour%10);
				}

				if (parseInt(next_min/10) != parseInt(cur_min/10)) {
					addBalls(LEFT + 39 * RADIUS + 15, TOP, parseInt(cur_min/10));
				}
				if (next_min%10 != cur_min%10) {
					addBalls(LEFT + 54 * RADIUS + 21, TOP, cur_min%10);
				}

				if (parseInt(next_sec/10) != parseInt(cur_sec/10)) {
					addBalls(LEFT + 78 * RADIUS + 30, TOP, parseInt(cur_sec/10));
				}
				if (next_sec%10 != cur_sec%10) {
					addBalls(LEFT+ 93 * RADIUS + 36, TOP, cur_sec%10);
				}


				RANGE = next_time;
			}
			
			updateBalls();
			console.log(balls.length)

		}

		function updateBalls() {
			for(var i = 0; i < balls.length; i++) {
				var item = balls[i];
				item.x += item.vx;
				item.y += item.vy;
				item.vy += item.g;

				if (item.y >= HEIGHT - RADIUS) {
					item.y = HEIGHT - RADIUS;
					item.vy = -item.vy * 0.75;
				}
				if (item.x >= WIDTH + RADIUS || item.x <= -RADIUS) {
					balls.splice(i, 1);
				}
			}

			if (balls.length > 300) {
				balls = balls.slice(0, 300);
			}
		}

		function addBalls(x, y, num) {
			for(var i = 0; i < digit[num].length; i++) {
				for(var j = 0; j < digit[num][i].length; j++) {
					if (digit[num][i][j] == 1) {
						var red = Math.floor(Math.random() * 256);
						var green = Math.floor(Math.random() * 256);
						var blue = Math.floor(Math.random() * 256);
						var ball = {
							x: x + (2 * RADIUS * j) + RADIUS + j,
							y: y + (2 * RADIUS * i) + RADIUS + i,
							g: 1.5 +Math.random(),
							vx: Math.pow( -1, Math.ceil(Math.random() * 1000) ) * 4,
							vy:-10,
							color: 'rgb('+red+','+green+','+blue+')'
						};

						balls.push(ball);
					}
				}
			}

		}

		function render(cxt) {
			cxt.clearRect(0, 0, cxt.canvas.width, cxt.canvas.height);
			var h = parseInt(RANGE / 3600);
			var m = parseInt((RANGE - h* 3600) / 60);
			var s = RANGE % 60;

			drawNum(LEFT, TOP, parseInt(h/10), cxt);
			drawNum(LEFT + 15 * RADIUS + 6, TOP, h%10, cxt);
			drawNum(LEFT + 30 * RADIUS + 12, TOP, 10, cxt);
			drawNum(LEFT + 39 * RADIUS + 15, TOP, parseInt(m/10), cxt);
			drawNum(LEFT + 54 * RADIUS + 21, TOP, m%10, cxt);
			drawNum(LEFT + 69 * RADIUS + 27, TOP, 10, cxt);
			drawNum(LEFT + 78 * RADIUS + 30, TOP, parseInt(s/10), cxt);
			drawNum(LEFT + 93 * RADIUS + 36, TOP, s%10, cxt);


			for(var i = 0; i < balls.length; i++) {
				cxt.beginPath();
				cxt.arc(balls[i].x, balls[i].y, RADIUS, 0, 2*Math.PI);
				cxt.closePath();
				cxt.fillStyle = balls[i].color;
				cxt.fill();
			}
		}
		
		function drawNum(x, y, num, cxt) {
			for (var i = 0; i < digit[num].length; i++) {
				for ( var j = 0; j < digit[num][i].length; j++) {
					if (digit[num][i][j] == 1) {
						var _x = x + (2 * RADIUS * j) + RADIUS + j;
						var _y = y + (2 * RADIUS * i) + RADIUS + i;
						drawShap(_x, _y, RADIUS, cxt);
					}
				}
			}
		}

		function drawShap(x, y, r, cxt) {
			cxt.beginPath();
			cxt.arc(x, y, r, 0, 2*Math.PI);
			cxt.closePath();

			cxt.fillStyle = '#005588';
			cxt.fill();
		}

		function getTimeRange() {
			var current_time = new Date();
			// var time_range = (current_time.getTime() + 3600*1000 - current_time.getTime()) / 1000;
			var time_range = END_TIME.getTime() - current_time.getTime();
			var time_range = Math.round(time_range / 1000);

			return time_range > 0 ? time_range : 0;
		}
	</script>
</body>
</html>